import React, {Component} from 'react'
import {
  Modal,
  Form,
  Input,
  Button
} from 'antd'
import {Relax} from 'iflux2'
import noop from 'util/noop'

const FormItem = Form.Item;
const layoutProps = {
  labelCol: { 
    span: 6 
  },
  wrapperCol: { 
    span: 18 
  }
}
@Relax
export default class CustomModal extends Component{
  static defaultProps = {
    modalVisb: false,
    onCancelEditor: noop,
    onEditorName: noop,
    onEditorOption: noop,
    onOptionSave: noop,
    editorInfo: {}
  }
  render() {
    let {modalVisb, onCancelEditor, editorInfo, onEditorName, onEditorOption, onOptionSave} = this.props;
    let {attrContent, attrDesc, typeId} = editorInfo.toJS();
    return (
      <Modal 
        key={typeId}
        title="退货填写项设置" 
        visible={modalVisb}
        onOk={onOptionSave} 
        onCancel={onCancelEditor}>
        <Form>
          <FormItem
            label="填写项名称"
            {...layoutProps}
            required>
            <Input
              name="attrDesc"
              value={attrDesc} 
              onChange={(e)=>onEditorName(e.target)}
              className="w100"/> <span className="ant-form-text">限制2-5字</span>
          </FormItem>
          <FormItem
            label="选项内容"
            {...layoutProps}
            required>
              <div className="pushb">
              {
                attrContent && attrContent.split(',').map((v,k)=>{
                  return (
                    <div key={k}>
                      <Input onChange={(e)=> this.onOptValueChange(e, k, attrContent)} value={v} className="w220"/>
                      <span className="font-form-text">
                        <Button className="ml10" type="primary" size="small" shape="circle" icon="plus" onClick={()=> this.onOptionAddAndMinus(true, k, attrContent)}/>
                        {
                          k > 0 
                          ? <Button className="ml5" type="ghost" size="small" shape="circle" icon="minus" onClick={()=> this.onOptionAddAndMinus(false, k, attrContent)}/>
                          : null
                        }
                      </span>
                    </div>
                  )
                })
              }
             </div>
          </FormItem>
          </Form>
      </Modal>
    )
  }
  onOptValueChange = (e, k, attrContent) => {
    let {onEditorOption} = this.props;
    let {value} = e.target;
    let contents = attrContent.split(',');
    contents[k] = value
    onEditorOption({attrContent: contents.join()});
  }
  onOptionAddAndMinus = (isAdd, k, attrContent) => {
    let {onEditorOption} = this.props;
    let contents = attrContent.split(',');
    if(isAdd){
      let postConts = contents.splice(++k);
      contents.push('')
      onEditorOption({attrContent:[...contents, ...postConts].join()});
    }else{
      contents.splice(k,1)
      onEditorOption({attrContent: contents.join()})
    }
  }
}